<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户省份分布</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="flot-chart" style="height:800px;">
                                    <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
    <script th:src="@{/ajax/libs/report/echarts/echarts-all.js}"></script>
    <th:block th:include="include :: sparkline-js" />
    <script type="text/javascript" th:inline="javascript">
	    $(document).ready(function () {
	        
	        var myChart = echarts.init(document.getElementById('flot-dashboard-chart'));

		   let option = {
		        title: {
		            text: '用户省份分布'
		        },
		        tooltip: {
		            trigger: 'item',
		            formatter: '{b}<br/>IP:{c}'
		        },
		        toolbox: {
		            show: false,
		            orient: 'vertical',
		            left: 'right',
		            top: 'center',
		            feature: {
		                dataView: {readOnly: false},
		                restore: {},
		                saveAsImage: {}
		            }
		        },
		        visualMap: {
		        	show : true,  
	                x: 'left',  
	                y: 'center',  
	                splitList: [   
	                    {start: 20000, end:30000},
	                    {start: 15000, end: 20000},  
	                    {start: 10000, end: 15000},  
	                    {start: 5000, end: 10000},  
	                    {start: 2000, end: 5000},
	                    {start: 1000, end: 2000},  
	                    {start: 100, end: 1000},
	                    {start: 0, end: 100},  
	                ],  
	                color: ['#FF3030', '#FF4500', '#FF6EB4', '#FF8C00', '#FFA54F', '#FFC1C1', '#FFDEAD', '#FFE4E1']  
		        },
		        series: [
		            {
		                name: '用户省份分布',
		                type: 'map',
		                mapType: 'china', // 自定义扩展图表类型
		                label: {
		                    show: true
		                },
		                data: [[${datas}]]
		            }
		        ]
		    }
	        // 使用刚指定的配置项和数据显示图表。
	        myChart.setOption(option);
	    	
	    });
    </script>
</body>
</html>
